<template>
  <el-card class="box-card">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div class="container">
      <!-- 控件容器 -->
      <div class="search">
        <!-- 表头搜索控件 -->
        <div class="input" style="width: 25%;">
          <el-input placeholder="搜索关键词" v-model="keywords" size="small" clearable> </el-input>
        </div>
        <div class="input" style="width: 15%;text-align: center">
          <el-input placeholder="设备编号" v-model="args.GasId" size="small" clearable> </el-input>
        </div>

        <div class="input" style="width: 15%;text-align: center">
          <el-input placeholder="使用单位" v-model="args.SydwName" style="" size="small" clearable> </el-input>
        </div>
        <div class="input" style="width: 10%">
          <el-button type="primary" style="width: 100%" size="small">查询</el-button>
        </div>
        <div class="input" style="width: 10%">
          <el-button style="width: 100%" size="small">重置</el-button>
        </div>
        <div class="input" style="width: 10%; margin-left: 8.5%">
          <el-button type="text" size="small">高级筛选</el-button>
        </div>
      </div>
      <div class="btns">
        <!-- 按钮 -->
        <div class="input">
          <el-button type="primary" style="width: 100%" size="small">添加</el-button>
        </div>
        <div class="input">
          <el-button type="primary" style="width: 100%" size="small">导入</el-button>
        </div>
        <div class="input">
          <el-button type="primary" style="width: 100%" size="small">导出</el-button>
        </div>
        <div class="input">
          <el-button type="primary" style="width: 100%" size="small">删除</el-button>
        </div>
        <div style="width:80%;text-align:right">
          <span class="iconfont">&#xe7b9;</span>
          &nbsp;
          <i class="el-icon-s-grid" style="font-size: 25px; color: #0099ff;padding-top: 6px"></i>
        </div>
      </div>
      <div class="table">
        <!-- 表格容器 -->
        <div class="container">
          <el-table v-loading="loading" :data="tableData" max-height="700" style="width: 100%">
            <el-table-column fixed prop="no" label="序号" width="120"></el-table-column>
            <el-table-column prop="f017" label="设备编号" width="250">
            </el-table-column>
            <el-table-column prop="f005" label="设备类型" width="200"></el-table-column>
            <el-table-column prop="f007" label="使用单位" width="400"></el-table-column>
            <el-table-column prop="regularCheckData" label="定检数据" width="90">
            </el-table-column>
            <el-table-column prop="spotCheckData" label="点检数据" width="90"> </el-table-column>
            <el-table-column prop="monitoringData" label="检测数据" width="90"> </el-table-column>
            <el-table-column prop="maintenanceData" label="维修数据" width="90"> </el-table-column>
            <el-table-column prop="regulatoryData" label="监控数据" width="90"> </el-table-column>
            <el-table-column prop="detectionData" label="监测数据" width="90"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="page">
        <div class="container">
          <el-pagination
            background
            @size-change="pageSizeChange"
            @current-change="pageChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20, 40]"
            :page-size="args.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script>
import { DataCloudSearchArgs, serachDataCloudList } from '../../../../api/guolu/data-cloud';
import Breadcrumb from '../BreadCrumb/BreadCrumb.vue'
export default {
  name: 'guoluDataCloud',
  data() {
    return {
      args: new DataCloudSearchArgs(),
      keywords: '',
      tableData: [],
      total: '',
      currentPage: 1,
      pageSize:10,
      naviBasicItems: [{ text: '电站锅炉' }, { text: '数据上云', to: '/guolu/DataToCloud/index' }],
      naviItems: [],
      loading: false,
    }
  },
  components: {
    Breadcrumb,
  },
  created() {
    // (this.args.SydwName = null),
    //   (this.args.GasId = null),
      (this.args.pageNum = 0),
      (this.args.pageSize = 10),
      (this.naviItems = [...this.naviBasicItems])
    this.searchData()
  },
  methods: {
    // 向后端发请求获得数据
    async searchData() {
      this.loading = true
      //console.log(this.args.pageSize+';'+this.args.pageNum)
      const res = await serachDataCloudList(this.args)
      this.loading = false
      // console.log(res)
      const list = res.data.data.list
      //console.log(list)
      list.map((item) => {
        if (item.id != "" || item.id != null) {
          item.regularCheckData = "1份";
        }
        item.monitoringData ='—'
        item.spotCheckData = '—'
        item.maintenanceData = '—'
        item.regulatoryData = '—'
        item.detectionData = '—'
      });
      this.tableData = list
      this.total=res.data.data.total
      //console.log(list)
    },
    // 页面大小改变
    async pageSizeChange(pageSize) {
      this.args.pageSize = pageSize
      this.args.pageNum = 0
      this.searchData()
      console.log(this.args.pageSize+"hhh")
    },
    // 页数改变
    async pageChange(page) {
      console.log('现在是第 ', page, ' 页')
      this.args.pageNum = page

      this.currentPage = page
      this.searchData()
    },
  },
}
</script>
<style lang="less" scoped>
div.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  div.search {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    div.input {
      padding: 5px;
    }
  }
  div.btns {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    div.input {
      padding: 5px;
    }
  }
  div.table {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    div.container {
      width: 95.5%;
      position: relative;
      left: -15px;
    }
  }
  div.page {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;
    right: 70px;
  }
    //iconfont的使用
  @font-face {
    font-family: 'iconfont';
    src: url('../../../../icons/iconfont/iconfont.woff2?t=1625151297720') format('woff2'),
    url('../../../../icons/iconfont/iconfont.woff?t=1625151297720') format('woff'),
    url('../../../../icons/iconfont/iconfont.ttf?t=1625151297720') format('truetype');
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 25px;
    color: #0099ff;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
</style>
